<script>
export default {
  name: "PaginationExamplePage",
  data(){
    return{
      tableData:[
        {
          name:'张飞',
          age : 32,
          sex :'male',
          data:'2024-8-24',
          address:'江苏省南京市',

        },
        {
          name:'张飞',
          age : 32,
          sex :'male',
          data:'2024-8-24',
          address:'江苏省南京市',

        },
        {
          name:'张飞',
          age : 32,
          sex :'male',
          data:'2024-8-24',
          address:'江苏省南京市',

        },
        {
          name:'张飞',
          age : 32,
          sex :'male',
          data:'2024-8-24',
          address:'江苏省南京市',

        },
        {
          name:'张飞',
          age : 32,
          sex :'male',
          data:'2024-8-24',
          address:'江苏省南京市',

        },
        {
          name:'张飞',
          age : 32,
          sex :'male',
          data:'2024-8-24',
          address:'江苏省南京市',

        },
        {
          name:'张飞',
          age : 32,
          sex :'male',
          data:'2024-8-24',
          address:'江苏省南京市',

        },
        {
          name:'张飞',
          age : 32,
          sex :'male',
          data:'2024-8-24',
          address:'江苏省南京市',

        },
        {
          name:'张飞',
          age : 32,
          sex :'male',
          data:'2024-8-24',
          address:'江苏省南京市',

        },
        {
          name:'张飞',
          age : 32,
          sex :'male',
          data:'2024-8-24',
          address:'江苏省南京市',

        },
        {
          name:'张飞',
          age : 32,
          sex :'male',
          data:'2024-8-24',
          address:'江苏省南京市',

        },
        {
          name:'张飞',
          age : 32,
          sex :'male',
          data:'2024-8-24',
          address:'江苏省南京市',

        },
        {
          name:'张飞',
          age : 32,
          sex :'male',
          data:'2024-8-24',
          address:'江苏省南京市',

        },
        {
          name:'张飞',
          age : 32,
          sex :'male',
          data:'2024-8-24',
          address:'江苏省南京市',

        },
        {
          name:'张飞',
          age : 32,
          sex :'male',
          data:'2024-8-24',
          address:'江苏省南京市',

        },
        {
          name:'张飞',
          age : 32,
          sex :'male',
          data:'2024-8-24',
          address:'江苏省南京市',

        },
        {
          name:'张飞',
          age : 32,
          sex :'male',
          data:'2024-8-24',
          address:'江苏省南京市',

        },
        {
          name:'张飞',
          age : 32,
          sex :'male',
          data:'2024-8-24',
          address:'江苏省南京市',

        },
        {
          name:'张飞',
          age : 32,
          sex :'male',
          data:'2024-8-24',
          address:'江苏省南京市',

        },
        {
          name:'张飞222',
          age : 32,
          sex :'male',
          data:'2024-8-24',
          address:'江苏省南京市',

        },
      ],
      currentPageData:[

      ],
    }
  },
  methods:{

    handelCurrentChange(current){
      this.refreshCurrentPageData(current)
          alert(`当前的页码是${current}`)
    },
    handelSizeChange(size){
        alert(`当前的尺寸是${size}`)

    },
    refreshCurrentPageData(current){
      this.currentPageData=[]
      for(let i = (current-1)*10;i<current*10;i++){
        this.currentPageData.push(this.tableData[i])
      }
    },


  },
  created(){
    this.refreshCurrentPageData(1)
  },
}
</script>

<template>
  <div>
      <el-table :data="currentPageData" stripe border>

        <el-table-column label="姓名" prop="name" width="200">
          <template v-slot="scope">
            <el-tag>
              {{scope.row.name}}
            </el-tag>
          </template>

        </el-table-column>
        <el-table-column label="年龄" prop="age" width="200">    </el-table-column>
        <el-table-column label="性别" prop="sex" width="200">    </el-table-column>
        <el-table-column label="日期" prop="data" width="200">    </el-table-column>
        <el-table-column label="地址" prop="address" width="200"></el-table-column>
        <el-table-column label="操作" >
          <el-button type="primary" size="mini" plain icon="el-icon-edit">编辑</el-button>
          <el-button type="danger" size="mini" plain icon="el-icon-delete"> 删除</el-button>
        </el-table-column>

      </el-table>

    <el-pagination :total="tableData.length"
                   @current-change="handelCurrentChange"
                   @size-change="handelSizeChange"
                   background
                   style="margin-top:10px"
                   layout ="sizes,prev,pager,next,jumper,total"/>
  </div>

</template>

<style scoped>

</style>